import React from 'react'
import {
    Form,
    Input,
    Button,
    Toast,

} from 'antd-mobile'
import request from '../../api/request'
import { useNavigate } from 'react-router-dom'

function Login() {

    let navtion = useNavigate()
    const onFinish = async (value) => {
        const res = await request.post('/api/login', value)
        console.log(res);
        let { code, data } = res.data
        if (code == 200) {
            localStorage.setItem('token', data.token)
            localStorage.setItem('userInfo', JSON.stringify(data.userInfo))
            Toast.show({
                icon: 'success',
                content: '登陆成功'
            })
            navtion('/')
        }

    }

    return (
        <div>
            <h1>登录您的12306账号</h1>
            <p>友列高铁承诺您的账号及个人信息的安全就对方的实力快捷方便大家</p>
            <p>绑定即视为同意《年则与隐私申明》</p>
            <div>
                <Form
                    layout='horizontal'
                    onFinish={onFinish}
                    footer={
                        <Button block type='submit' size='large'>
                            登录
                        </Button>
                    }
                >

                    <Form.Item
                        name='username'
                        // label='姓名'
                        rules={[{ required: true, message: '姓名不能为空' }]}
                    >
                        <Input onChange={console.log} placeholder='请输入姓名' />
                    </Form.Item>
                    <Form.Item
                        name='password'
                        // label='姓名'
                        rules={[{ required: true, message: '姓名不能为空' }]}
                    >
                        <Input onChange={console.log} placeholder='请输入姓名' />
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}

export default Login
